<template>
  <div id="container">
    <el-row>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button>选择</el-button>
      <el-button type="primary">选择</el-button>
      <el-button type="success">选择</el-button>
      <el-button type="info">选择</el-button>
      <el-button type="warning">选择</el-button>
      <el-button type="danger">选择</el-button>
    </el-row>
    <el-calendar :range="['2020-01-01', '2020-06-30']" first-day-of-week="7">
    </el-calendar>
  </div>
</template>
<script>
export default {
  name: "SchoolCalendar",
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "2019-2020第一学期"
        },
        {
          value: "选项2",
          label: "2019-2020第二学期"
        },
        {
          value: "选项3",
          label: "2020-2021第一学期"
        },
        {
          value: "选项4",
          label: "2020-2021第二学期"
        }
      ]
    };
  }
};
</script>
<style>
#container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
.is-selected {
  color: #1989fa;
}
.content {
  color: green;
}
</style>
